<template>
  <div class="echart-box" :style="{width: '100%', height: '100%'}">
    <div id="scatterPlotChart" :style="{width: '98%', height: '98%'}"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  props: {
    scatterData: {
      type: Array,
      required: true
    },
    xIdData: {
      type: [Object,String],
      required: true
    },
    yIdData: {
      type: [Object,String],
      required: true
    },
  },
  watch: {
    scatterData: {
      handler(n, o) {
        this.drawPLot()
      },
      deep:true
    }
  },
  data() {
    return {
      myChart: null,
      sampleName:null,
    }
  },
  mounted() {
    setTimeout(() => {
      this.drawPLot()
    })
    window.addEventListener('resize', this.resizeChart)
  },
  activated() {
    if(this.myChart){
      this.resizeChart()
    }
  },
  methods: {
    resizeChart() {
      this.myChart.resize()
    },
    drawPLot() {
      console.log(this.xIdData) // 基于准备好的dom，初始化echarts实例
      this.myChart = echarts.init(document.getElementById('scatterPlotChart'))
      // 绘制图表
      const { yIdData,scatterData,xIdData,sampleName } = this
      this.myChart.setOption({
        backgroundColor: '#fff',
        title:{
          text:sampleName?`分析数据集-${sampleName}`:'',
          subtext :
          (xIdData?`X轴: ${xIdData}\n`:'') +
          (yIdData?`Y轴: ${yIdData}\n`:'')
        },
        toolbox:{
          feature:{
            saveAsImage:{
              type:'png',
              name:'变量关联-散点图'
            }
          }
        },
        grid: {
            top: '10%',
            left: '5%',
            right: '5%',
            bottom: '12%',
            containLabel: true
        },
        calculable: true,
        xAxis: {
          name:xIdData,
          nameGap:40,
          nameLocation: "middle",
          nameTextStyle: {
            fontSize: 14,
            align: "center",
            lineHeight: 41
          },
          splitLine: {
            lineStyle: {
              type: 'dashed'
            }
          }
        },
        yAxis: {
          name:yIdData,
          nameLocation: "middle",
          nameGap:40,
          nameTextStyle: {
            fontSize: 14,
            align: "center",
            lineHeight: 65
          },
          splitLine: {
              lineStyle: {
                  type: 'dashed'
              }
          },
          scale: true
        },
        series: [{
            name: '散点图',
            type: 'scatter',
            showSymbol: false,
            itemStyle: {
              normal: {
                color: '#102b6a', //颜色
              }
            },
            symbol: 'circle', //circle, rect, roundRect, triangle,  pin, diamond, arrow
            symbolPosition: 'end',
            symbolSize: 20,
            lineStyle: {
                normal: {
                    color: "#737373"
                },
            },
            label: {
                show: false,
                position: 'top',
                textStyle: {
                    color: '#737373',
                }
            },
            // tooltip: {
            //     show: true
            // },
            data: scatterData,
        }]
      })
    }
  },
  destroyed() {
    window.removeEventListener('resize', this.resizeChart)
  }
}
</script>
